<template>
  <div>
    <Row :gutter='16'>
      <Col span="12">
       <Alert>嵌套三层，内层的tab值需与其父级Tabs的name保持一致</Alert>
       <!-- 第一层 -->
        <Tabs :animated="false" name='tab1' type='card'>
          <TabPane label="标签一" name='tab1-1' tab='tab1'>
            <!-- 第二层 -->
            <Tabs name='tab1-1'>
              <TabPane label="1-1" name="" tab='tab1-1'>
                <!-- 第三层 -->
                <Tabs name='tab1-1-1'>
                  <TabPane label="1-1-1" name="" tab='tab1-1-1'>
                    标签 1-1-1
                  </TabPane>
                  <TabPane label="1-1-2" name="" tab='tab1-1-1'>
                    标签 1-1-2
                    </TabPane>
                  <TabPane label="1-1-3" name="" tab='tab1-1-1'>
                    标签 1-1-3
                    </TabPane>
                </Tabs>
              </TabPane>
              <TabPane label="1-2" name="" tab='tab1-1'>1-2</TabPane>
              <TabPane label="1-3" name="" tab='tab1-1'>1-3</TabPane>
            </Tabs>
          </TabPane>
          <TabPane label="标签二">
            标签二的内容
            </TabPane>
          <TabPane label="标签三">
            标签三的内容
            </TabPane>
      </Tabs>
      </col>
      <Col span="12">
       <Alert>嵌套两层，内层tab需与其父级Tabs的name保持一致</Alert>
       <!-- 第一层 -->
        <Tabs :animated="false" name='tab1' type='card' :value='1'>
          <TabPane label="标签一" name='tab1-1' tab='tab1'>
            <!-- 第二层 -->
            <Tabs name='tab1-1'>
              <TabPane label="1-1" name="" tab='tab1-1'>
                1-1
              </TabPane>
              <TabPane label="1-2" name="" tab='tab1-1'>1-2</TabPane>
              <TabPane label="1-3" name="" tab='tab1-1'>1-3</TabPane>
            </Tabs>
          </TabPane>
          <TabPane label="标签二">
            标签二的内容
            </TabPane>
          <TabPane label="标签三">
            标签三的内容
            </TabPane>
      </Tabs>
      </col>
    </Row>
  </div>
</template>
<script>
export default {

}
</script>
